<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>react</title>
</head>
<body>
  <div id="root"></div>

  <script type="text/javascript" src="./components/react.development.js"></script>
  <script type="text/javascript" src="./components/react-dom.development.js"></script>
  <script type="text/javascript" src="./components/babel.min.js"></script>

  <script type="text/babel">
  // 封装真正可复用的 Clock 组件
    function Clock (props) {
      return (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {props.date.toLocaleTimeString()}.</h2>
        </div>
      );
    }

    function tick () {
      ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('root')
      )
    }

    setInterval(tick, 1000);

    class Clock extends React.Component {
      render () {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
          </div>
        )
      }
    }

    
  </script>
</body>
</html>